<template>
  <div>
    <div v-if="tableData.length==0">
      <h1 class="tishi">没有需要做的试卷</h1>
    </div>
    <div class="card-wrap">
      <div class="survey-card-context" v-for="item in tableData">
        <el-card :body-style="{ padding: '20px'}" class="exam" shadow="always" >
          <div  >
            <div class="time1"><p class="ziti">{{item.title}}</p></div>
            <div class="bottom clearfix">
              <time class="time2"><strong>创建人:</strong>{{item.creatorName}}</time>
              <time class="time2"><strong>开始时间:</strong>{{item.startTime}}</time>
              <time class="time2"><strong>结束时间:</strong>{{item.endTime}}</time>
              <el-button type="text"  @click="doing(item.id)" icon="el-icon-s-data">开始考试</el-button><br />
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>

export default {

  data() {
    return {
      // loading:true,
      sth:'',
      flag:true,
      tableData: null,
    }
  },
  methods: {
    doing(id){
      this.$router.push({
        path: "/answer/"+id,

      })
    }
  },
  created() {
    const _this = this;
    let id1=sessionStorage.getItem('id');
    axios.get(_this.APIurl.apiUrl.domainName+'examPaper/waitToDo/'+id1).then(function(resp){
      _this.tableData = resp.data.data
      console.log(_this.tableData)
    })
  }


}
</script>


<style scoped>
.tishi{
  margin-top: 200px;
  text-align: center;
  color: #909399;
}
.weizhi{
  margin-left: 180px;
}

.serch{
  margin-top: 50px;
  margin-right: 20px;
  float: right;
}

.card-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  margin-left: 13%;
}
.survey-card-context {
  margin: 20px 40px 40px 20px;
}

.ziti{
  font-size:22px ;
  font-family: 楷体;
  width:180px;
  color: black;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.time1 {
  text-align: center;
  font-size: 15px;
  color: #999;
}
.time2{
  display: block;
  margin-top: 10px;
  font-size: 15px;
  color: #999;
}
.exam {
  width: 210px;
  height: 260px;
  margin-right: 30px;
  transition: all .5s;
  background: -webkit-linear-gradient(top,hsla(0,0%,59%,.15),hsla(0,0%,59%,0),white) no-repeat;
}
.exam:hover{
  margin-top: -5px;
}


</style>
